<template>
  <image :src="imgSrc"
         binderror="onError"
         bindload="onLoad"
  ></image>
</template>

<script>
  export default {
    behaviors: [],
    properties: {
      src: String,
      def: String
    },
    observers: {
      'src': function (newVal) {
        this.setData({
          imgSrc: newVal ? newVal : this.data.def
        })
        // this.setData({
        //   imgSrc: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83erqTAeZqj2xX4AaMhhHyzKcqu6Eq36iaQiceKjSRsR8uCUksnMliaKmdpNBAPuXyAAmjdZHJAibAcdIDw/132'
        // })
      }
    },
    data() {
      return {
        imgSrc: ''
      }
    },
    attached() {
      // this.setData({
      //   imgSrc: this.data.src ? this.data.src : this.data.def
      // })
    },
    methods: {
      onError() {
        console.error('image load error')
        this.setData({
          imgSrc: this.data.def
        })
      },
      onLoad() {
        console.log('image load ready')
      }
    },
  }
</script>

<style lang="less">
</style>
